import React from 'react'

// 引入底部
import Tabbar from '@/components/common/Tabbar.js'

const Home = () =>
{
    const [cate,setCate] = React.useState([])

    const [product,setProduct] = React.useState([])

    const GetHomeData = async () =>
    {
        let result = await React.$Api.HomeIndex()

        let data = result.data

        setCate(data.CateList)

        setProduct(data.ProductList)
    }

    React.useEffect(() => {
        GetHomeData()
    },[])

    /**
     * 文章
    */
    const Cate = () =>
    {
        if(cate)
        {
            return cate.map((item,index) => {
                return (
                    <li key={index}>
                        <img src={item.image_text} alt="" />
                        <div className="right" style={{marginTop:'10px'}}>
                            <React.$Router.NavLink to={"/category/category/info?id=" + item.id}>
                                <p>{item.name}</p>
                            </React.$Router.NavLink>
                            <span>{item.createtime_text}</span>
                        </div>
                    </li>
                )
            })
        }
    }

    /**
     * 产品
    */
    const ProductCenter = () =>
    {
        if(product.length > 0)
        {
            return (
                <React.$Vant.Swiper>
                     {product.map((item,index) => {
                        return (
                            <React.$Vant.Swiper.Item  key={index}>
                                <React.$Router.NavLink style={{height:'300px'}} to={`/product/product/info?pid=${item.id}`} className="a_blok">
                                    <img src={item.cover_cdn} alt="" />
                                    <span>查看详情</span>
                                </React.$Router.NavLink>
                            </React.$Vant.Swiper.Item>
                        )
                    })}
                </React.$Vant.Swiper>
            )
        }
    }

    return (
        <>
            {/* <!-- 快捷导航 -->  */}
            <div className="shouye_kuanj">
                <div className="swiper-wrapper">
                    <div className="swiper-slide" style={{width:'90px'}}>
                        <React.$Router.NavLink to="/lease/lease/add">
                            <img src="/assets/images/kj.png" alt="" />
                            <p>产品租赁</p>
                        </React.$Router.NavLink>
                    </div>
                    <div className="swiper-slide" style={{width:'90px'}}>
                        <React.$Router.NavLink to="">
                            <img src="/assets/images/kj1.png" alt="" />
                            <p>我要归还</p>
                        </React.$Router.NavLink>
                    </div>
                    <div className="swiper-slide" style={{width:'90px'}}>
                        <React.$Router.NavLink to="/product/product/index" state={{name:'home'}}>
                            <img src="/assets/images/kj2.png" alt="" />
                            <p>商品大全</p>
                        </React.$Router.NavLink>
                    </div>
                    <div className="swiper-slide" style={{width:'90px'}}>
                        <React.$Router.NavLink to="">
                            <img src="/assets/images/kj3.png" alt="" />
                            <p>关于我们</p>
                        </React.$Router.NavLink>
                    </div>
                </div>
            </div>
            {/* <!-- 产品中心 --> */}
            <div className="chan_p_center">
                
                {/* <!-- 产品 --> */}
                <div className="chanp_k_sy">
                    <div className="sjpiue_chanp_list">
                        
                        <ProductCenter />
                    </div>
                </div>

                {/* 文章 */}
                <div className="list_color" style={{marginTop:'10px'}}>
                    <ul>
                        <Cate />
                    </ul>
                </div>
            </div>
            <div style={{height:".75rem"}}></div>

            <Tabbar />
        </>
    )
}

export default Home